<template>
  

<el-container class="home-container">
  <el-header ><Header :OnoutLogin="outLogin"><el-button @click="chuangeaside">///</el-button></Header></el-header>
  <el-container>
    <el-aside :width="isCollapse? '64px' : '200px'">
      <Menu :menuslist="menus" :isCollapse="isCollapse" :iconObj="iconObj" :OnsaveNavState="saveNavState" 
      :routerString="routerString"></Menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  
</template>

<script>
import Header from '../../components/Header'
import Menu from '../../components/Menu'
import {getMenusList} from "../../api/menu"
  export default {
    data(){
      return{
        menus:[],
        isCollapse:false,
        iconObj:{
          '125':"iconfont icon-users",
          '103':"iconfont icon-tijikongjian",
          '101':"iconfont icon-shangpin",
          '102':"iconfont icon-danju",
          '145':"iconfont icon-baobiao"
        },
        // 保存到seesionStorrage中  动态给el-menu的default-active
        routerString:'',
        breadcrumb:{}
      }
    },
    mounted(){
      // clearTimeout(this.timer)
    },
    created(){
      this.getmeunlist()
      this.routerString = sessionStorage.getItem('activepath')
      // this.timer()
    },
    // updated(){
    //   clearTimeout(this.timer)
    // },
    components:{
      Header,
      Menu
    },
    // watch: {
    //   '$route' (to, from) {
    //     console.log(this.getStatus(this.$route.path))
    //   }
    // },
    methods:{
      timer() {
        return setTimeout(()=>{
          this.$router.go(0)
        },1000)
      },
      outLogin(){
        sessionStorage.removeItem("token")
        this.$router.push("/login")
        // console.log(1);
      },
      async getmeunlist(){
       let token = sessionStorage.getItem('token')
       if(token){
          let res = await getMenusList()
          console.log(res,"列表");
          this.menus=res.data.data
          console.log(this.menus);
       }
      },
      chuangeaside(){
        this.isCollapse=!this.isCollapse
      },
      saveNavState(path,a,b){
        // console.log(path,"二级列表的的路由地址");
        // console.log(a,b,"名字");
        sessionStorage.setItem("activepath",path)
        sessionStorage.setItem("breadcrumba",a)
        sessionStorage.setItem("breadcrumbb",b)
      }
    }
  }
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
}
.el-header{
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    // display: flex;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    /* text-align: center;
    line-height: 200px; */
    // 给侧边栏加个过渡动画
    transition: all 0.6s;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
  }
</style>